// import { Clear } from '@react-vant/icons';
import React from 'react';
/**
 * 处理（页面/组件）的异常错误，由于 hooks 中没有错误边界的生命周期，此组件采用 class 写法
 */
class ErrorBoundary extends React.Component<{ children: React.ReactNode }, { hasError: boolean, errorInfo: string }> {
    state = { hasError: false, errorInfo: '' };

    static getDerivedStateFromError(error: any) {
        return { hasError: true, errorInfo: error.message };
    }

    componentDidCatch(error: any, errorInfo: any) {
        console.log(error, errorInfo);
    }

    render() {
        if (this.state.hasError) {
            return (
                <div className="w-full h-full flex flex-col items-center justify-center">
                    {/* <Clear fontSize={60} color="var(--rv-danger-color)" /> */}
                    <div className="text-xl my-2">意外错误</div>
                    <div className="px-4 break-all">{this.state.errorInfo}</div>
                </div>
            );
        }
        return this.props.children;
    }
}

export default ErrorBoundary;
